<template>
  <el-container>
    <el-container class="main-area">
      <div class="left-area">
          <div class="user-info">
            <div class="title">用户信息</div>
            <div class="sub-info">姓名：{{userMsg.name}}</div>
            <div class="sub-info">性别：{{userMsg.gender}}</div>
            <div class="sub-info">年龄：{{userMsg.age}}</div>
            <div class="sub-info">身高：{{userMsg.height}}CM</div>
            <div class="sub-info">体重：{{userMsg.weight}}KG</div>
          </div>
      </div>
      <el-main class="main-pd">
        <el-row>
          <el-col class="item" :span="8" @click.native="toNext(0)">
            <img src="../assets/train.png" alt="" class="item-img" />
            <div class="item-desc">呼吸检测</div>
          </el-col>
          <el-col class="item" :span="8" @click.native="toNext(1)">
            <img src="../assets/game.png" alt="" class="item-img" />
            <div class="item-desc">呼吸训练</div>
          </el-col>
          <el-col class="item" :span="8" @click.native="toNext(2)">
            <img src="../assets/paitan.png" alt="" class="item-img" />
            <div class="item-desc">辅助排痰</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col class="item" :span="8" @click.native="toNext(3)">
            <img src="../assets/caculate.png" alt="" class="item-img" />
            <div class="item-desc">指标计算</div>
          </el-col>
          <el-col class="item" :span="8" @click.native="toNext(4)">
            <img src="../assets/setting.png" alt="" class="item-img" />
            <div class="item-desc">设置</div>
          </el-col>
          <el-col class="item" :span="8" @click.native="toNext(5)">
            <img src="../assets/table.png" alt="" class="item-img" />
            <div class="item-desc">训练记录</div>
          </el-col>
        </el-row>
      </el-main>

    </el-container>
  </el-container>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: "Meau",
  data() {
    return {
      userMsg:{}
    };
  },
  methods: {
    toNext(num) {
      const toMap = [
        "/train",
        "/gameTrain",
        "/paitanTrain",
        "/zhibiao",
        "/setMeau",
        "/tarinOrder",
      ];
      this.$router.push(toMap[num]);
    },
  },
  mounted(){
    this.userMsg = JSON.parse(localStorage.getItem('userMsg'))
  },

};
</script>

<style scoped>
.left-area{
  width: 360px;
  display: flex;
  justify-content: center;
  padding: 20px 0 20px 20px ;
  background: #e9eef3;
}
.user-info {
  width: 360px;
  background-color: #fff;
  line-height: 20px;
  border-radius: 8px;
}
.title {
  padding-left: 30px;
  height: 64px;
  display: flex;
  align-items: center;
  text-align: center;
  font-size: 32px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 45px;
  margin-bottom: 30px;
  border-radius: 8px 8px 0 0 ;

  background: linear-gradient(170deg, #37BE98 0%, #0F7DDF 100%);
}
.sub-info {
  font-size: 32px;
  line-height: 24px;
  margin-top: 40px;
  margin-bottom: 40px;
  text-align: left;
  padding-left: 40px;
  color: black;
}
.main-pd {
  padding: 20px;
}
.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: #fff;
  height: 400px;
}
.item-img {
  width: 160px;
  height: 160px;
  margin-bottom: 20px;
}
.item-desc {
  font-size: 44px;
  line-height: 35px;
}
.aside-pd {
  margin-top: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.btn {
  width: 250px;
  height: 60px;
  background-color: #37d7ff;
  border: 1px solid #009fc7;
  color: #fff;
  font-size: 40px;
  font-weight: 600;
  margin-bottom: 50px;
  border-radius: 20px;
  line-height: 60px;
  cursor: pointer;
}
.btn-img {
  width: 60px;
  height: 60px;
  margin-left: 20px;
}
.change-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 100px;
  text-align: center;
  font-size: 50px;
  color: #009fc7;
  background-color: #fff;
  line-height: 100px;
  font-weight: 600;
  border-radius: 30px;
  border: 3px solid #ccc;
  cursor: pointer;
}
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}
.main-area{
  margin-top: 10vh;
  height: 90vh;
}
</style>
